<template>
  <!-- <scroll-view scroll-x  class="scroll-view_H"> -->
    <view style="padding: 10rpx">
    <u-scroll-list :indicator="false">
  
      <view class="others font-size size" @tap="handleTap(item)" :class="{active:props.active_index == item.id}" v-for="item,index in c3List">
       

        <view>{{ item.title }}</view>
      </view>
    
    </u-scroll-list>
  </view>
  <!-- </scroll-view> -->
</template>



<script setup lang="ts">
import { defineProps ,ref,defineEmits} from 'vue'
const active_index = ref(0)
const props = defineProps({
  c3List:{
    type:Array,
    default:[]
  },
  active_index:{
    type:String,
    default:'-1'
  }
})

const emits = defineEmits(['handleTap'])

const handleTap = (item)=>{


  emits('handleTap',item)


}


</script>

<style lang="scss" scoped>


$border-radio-size: 10rpx;
$border-radio-size2: 36rpx;
$bg:rgb(195, 195, 195);
$padding-left:40rpx;



.size {
  border-radius: $border-radio-size;
  padding: 10rpx 0;
  width: 160rpx;
  text-align: center;
}
.font-size {

 font-size: 24rpx;
 color: #737373;

}
.gray-bg{
  background-color: $bg;
}
.layout{
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  gap: $padding-left;
  // padding: 20rpx;
  // border-radius: 20rpx;
  
}
.active {
    color: black;
    font-weight: 600;
    background-color: #e3e3e3;
    
  }
</style>
